<template>
  <div class="map-container">
    <div class="map">
      <v-chart class="map-chart" :option="option1"> </v-chart>
    </div>
    <div class="card-container">
      <!-- 右侧上方卡片 -->
      <el-card style="width: 260px; height: 240px" shadow="hover">
        <!-- 卡片头 -->
        <template #header>
          <h4>订单同比增长</h4>
        </template>

        <!-- 卡片体 -->
        <template #default>
          <div class="chart-container">
            <v-chart class="chart" :option="option2"> </v-chart>
          </div>
        </template>
      </el-card>

      <!-- 右侧下方卡片 -->
      <el-card style="width: 260px; height: 240px" shadow="hover">
        <!-- 卡片头 -->
        <template #header>
          <h4>热门搜索</h4>
        </template>

        <!-- 卡片体 -->
        <template #default>
          <div class="chart-container">
            <v-chart class="chart" :option="option3"> </v-chart>
          </div>
        </template>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
//引入百度地图
import 'echarts/extension/bmap/bmap.js';

//引入自定义地图配置
import mapConfig from './assets/custom_map_config.json';

//引入水球图
import 'echarts-liquidfill';
//引入词云图
import 'echarts-wordcloud';

import axios from 'axios';

//地图尺寸不能直接设置 地图设置了绝对定位 给父元素设置尺寸 在父元素上添加相对定位;
const option1 = ref({
  //底图
  bmap: {
    key: '', // 申请的baidu地图ak
    center: [108.954355, 34.346721], // 地图中心点坐标
    zoom: 5, // 地图的缩放级别(默认值5)
    roam: true, // 是否开启鼠标缩放和平移漫游

    //自定义地图
    mapStyle: {
      styleJson: mapConfig,
    },
  },

  //全局提示框--散点图内部自定义
  tooltip: {},

  //自定义散点图
  series: [
    //普通样式的散点图
    {
      type: 'scatter',
      name: '新中地外卖',
      coordinateSystem: 'bmap', // 指定使用百度地图做为坐标系
      tooltip: {
        //内部微调提示框样式
        formatter: function (params) {
          // params.data.value [经度,纬度,销售额]
          const value = params.data.value;
          //蓝色圆点
          const dot = `<span style="width:8px;height:8px;border-radius:50%;background:${params.color};margin-right:5px;"></span>`;
          return `<div style="width:70px; margin-bottom:2px;"> ${params.seriesName}</div>
                    <div style="display:flex;justify-content:space-between;">
                      <div style="display:flex;align-items:center;">
                        ${dot}
                        <span>${params.name}</span>
                      </div>
                      <span style="font-weight:bold;">${value[2]}</span>
                    </div>`;
        },
        textStyle: {
          fontSize: 10,
          color: '#666',
        },
        padding: 5,
      },
      // 对于地图类型的data格式: [{name: '北京', value: [经度, 纬度, 销售额]}]
      data: [
        {
          name: '西安',
          value: [108.954355, 33.346721, 100],
        },
      ],
      // 自定义散点的大小, 销售额 / 10
      symbolSize(val) {
        return val[2] / 10;
      },
      itemStyle: {
        color: '#5270D4',
      },
    },

    //涟漪样式的散点图
    {
      type: 'effectScatter',
      name: '新中地外卖TOP10',
      coordinateSystem: 'bmap',
      tooltip: {
        //内部微调提示框样式
        formatter: function (params) {
          const value = params.data.value;
          return `${params.name}销售额: ${value[2]}`;
        },
        textStyle: {
          fontSize: 10,
          color: 'green',
        },
        padding: 5,
      },
      data: [
        {
          name: '西安',
          value: [108.954355, 34.346721, 200],
        },
      ],
      symbolSize(val) {
        return val[2] / 10;
      },
      // 设置涟漪效果
      rippleEffect: {
        brushType: 'stroke',
        color: 'purple',
      },
    },
  ],
});

//水球图
const option2 = ref({
  series: {
    type: 'liquidFill',
    data: [0.02],
    color: ['red'],
    radius: '80%', // 水球的半径
    outline: {
      borderDistance: 2, // 轮廓的距离(padding)
      itemStyle: {
        borderWidth: 2, // 轮廓的宽度(border)
      },
    }, // 连线的轮廓
    amplitude: '4%', // 波浪的高度(振幅)
  },
});

//词云图
const option3 = ref({
  tooltip: {
    textStyle: {
      fontSize: 10,
    },
  },
  series: {
    type: 'wordCloud',
    //字体大小范围
    sizeRange: [10, 40],
    // 数据结构[{name: '词1', value: 100}, {name: '词2', value: 100},...]
    data: [],
    width: '100%',
    height: '100%',

    textStyle: {
      color() {
        // 生成随机颜色
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
      },
    },
    // 强调高亮效果
    emphasis: {
      focus: 'self',
      textStyle: {
        textShadowBlur: 5,
      },
    },
  },
});

//获取后端数据--地图数据
axios.get('http://project.x-zd.net:3001/apis/mapdata').then((res) => {
  console.log(res.data.city);
  console.log(res.data.geodata);
  //以城市名进行匹配 把两个数组中独立的值和经纬度合并成一个数组
  const data = res.data.city.map((item) => {
    return {
      name: item.name,
      value: [...res.data.geodata[item.name], item.value],
    };
  });
  //取最后10个作为涟漪样式的散点图数据
  const dataTop10 = data.slice(-10);
  console.log(dataTop10);
  //分别赋值给普通样式的散点图和涟漪样式的散点图
  option1.value.series[0].data = data;
  option1.value.series[1].data = dataTop10;
});

//获取后端数据--水球图
axios.get('http://project.x-zd.net:3001/apis/reportdata').then((res) => {
  console.log(res.data.orderToday);
  console.log(res.data.orderLastDay);
  //赋值给水球图 (昨日订单-今日订单)/昨日订单
  option2.value.series.data = [(res.data.orderToday - res.data.orderLastDay) / res.data.orderLastDay.toFixed(2)];
});

//获取后端数据--词云图
axios.get('http://project.x-zd.net:3001/apis/keyworddata').then((res) => {
  console.log(res.data);
  //.keyWord .totalSearch 合并成一个数组
  const data = res.data.map((item) => {
    return {
      name: item.keyWord,
      value: item.totalSearch,
    };
  });

  console.log(option3.value.series.data);
  //赋值给词云图
  option3.value.series.data = data;
  console.log(option3.value.series.data);
});
</script>

<style scoped>
.map-container {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 200px;
  padding: 10px;
  width: 1200px;
  height: 520px;
}

.map {
  position: relative;
  width: 900px;
  height: 100%;
  background-color: #fff;
  border: 1px solid #ccc;
}

:deep(.BMap_mask) {
  width: 900px;
  height: 500px;
}

.card-container {
  width: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

h4 {
  font-size: 14px;
}

:deep(.el-card__header) {
  padding: 10px;
}
:deep(.el-card__body) {
  padding: 10px;
}

.chart-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart {
  width: 160px;
  height: 160px;
}
</style>
